import { useCustomTheme } from "@/context/ThemeContext";
import { Avatar, Button } from "@taroify/core";
import { View } from "@tarojs/components";
import { SectorType, UserType } from "@/types";
import { GoodJobOutlined, Ellipsis, Plus } from "@taroify/icons";
import { addOrCanelTasteApi } from "@/api";
import { getUser } from "@/utils/auth";
import { imgAddPrefix } from "@/utils";
import ShowUserInfo from "./ShowUserInfo";

interface dataProps extends UserType, SectorType {
  starIs: boolean;
}
interface UserTagProps {
  data: dataProps;
  flag?: boolean;
  right?: React.ReactNode;
  size?: "mini" | "small" | "medium" | "large";
  apply?: React.ReactNode;
  info?: boolean;
  bgc?: string;
  comment?: boolean;
  reload?: () => void;
}

export default ({
  data,
  flag = false,
  right,
  size = "medium",
  apply,
  info = false,
  bgc = "transparent",
  comment = false,
  reload,
}: UserTagProps) => {
  const { theme } = useCustomTheme();
  let color = theme.titleColor;
  if (flag) color = "#000";
  function follow() {
    const params = {
      markFlag: data.username ? 1 : 0,
      tasteId: data.kid,
      userId: getUser().kid,
    };
    addOrCanelTasteApi(params).then(() => reload && reload());
  }
  return (
    <View
      className="flex justify-between items-center w-full p-2 box-border rounded-lg"
      style={{ backgroundColor: bgc }}
    >
      <View className="flex">
        {data?.username ? (
          <ShowUserInfo
            username={data.username}
            avatar={data.avatar}
            userID={data.kid}
            size={size}
          />
        ) : (
          <Avatar
            src={imgAddPrefix(data?.sectorUrl ?? "")}
            size={size}
            shape="rounded"
          />
        )}

        <View className="ml-3 flex justify-between flex-col">
          <View style={{ color }}>{data?.username ?? data?.sectorName}</View>
          <View className="text-xs flex gap-3 text-gray-400">
            {!comment &&
              (info ? (
                <>
                  <View>14小时前</View>
                  <View>IP属地:{data?.address}</View>
                </>
              ) : (
                <>
                  <View>关注：{data.postCount}</View>
                  <View>帖子：{data.starCount}</View>
                </>
              ))}
          </View>
          <View>{apply}</View>
        </View>
      </View>

      {right ? (
        <View className="flex items-center gap-2">
          <Button
            className="w-16"
            size="mini"
            variant="contained"
            color="primary"
            icon={<Plus />}
            shape="round"
            onClick={follow}
          >
            {data.starIs ? "关注" : "取消关注"}
          </Button>
          {right}
        </View>
      ) : (
        <View className="flex gap-3 text-sm  text-gray-500 items-center">
          <View className="flex items-center">
            <GoodJobOutlined />
            393
          </View>
          <Ellipsis />
        </View>
      )}
    </View>
  );
};
